<template>
  <div class="seller" ref="seller">
      <div class="seller-content">
 					<div class="overview">
 						<!--店名-->
 							<h1 class="title">
 							    {{seller.name}}
 							</h1>
 							<!--评价-->
 							<div class="desc border-bottom">
 								<star :size="36" :score="seller.score" ></star>
 								<span class="text">({{seller.ratingCount}})</span>
 								<span class="text">月售{{seller.sellCount}}单</span>
 							</div>
 							<!--起送价-->
 							<ul class="remark">
 								<li class="block border-right">
 									<h2>起送价</h2>
 									<div class="content">
 										<span class="stress">{{seller.minPrice}}</span>元
 									</div>
 								</li>
 									<li class="block border-right">
 									<h2>商家配送</h2>
 									<div class="content">
 										<span class="stress">{{seller.deliveryPrice}}</span>元
 									</div>
 								</li>
 									<li class="block border-right">
 									<h2>平均配送时间</h2>
 									<div class="content">
 										<span class="stress">{{seller.deliveryTime}}</span>分钟
 									</div>
 								</li>
 							</ul>
							<!--收藏信息-->
		           <div class="favorite" @click="toggleFavorite($event)">
		           	<span class="icon-favorite" :class="{'active':favorite}"></span>
		           	<span class="text">{{favoriteText}}</span>
		           </div>					
 					</div>
 					 <split></split>
 					 <!--公告和活动-->
 					 <div class="bulletin">
 					 	  <h1 class="title">公告和活动</h1>
 					 	  <div class="content-wrapper">
 					 		  <p class="content">{{seller.bulletin}}</p>
 					 	  </div>
 					 	 <!--ul-->
    			 		  <ul v-if="seller.supports" class="supports">
    			 		  	<li class="support-item border-bottom" v-for="(item,index) in seller.supports" :key="index">
    			 		  		<span class="icon" :class="classMap[seller.supports[index].type]"></span>
    			 		  		<span class="text">{{seller.supports[index].description}}</span>
    			 		  	</li>
    			 		  </ul>
 					  </div>
 					  <!--滚动条-->
 					  <split></split>
 					  <!--轮播图-->
 					 <div class="pics">
 					 	<h1 class="title">商家实景文案</h1>
 					 	<div class="pic-wrapper" ref="picwrapper">
 					 		<ul class="pic-list" ref="piclist">
 					 			<li class="pic-item" v-for="(pic,index) in seller.pics" :key="index">
 					 				<img alt="" :src="pic" width="120" height="90" />
 					 			</li>
 					 		</ul>
 					 	</div>
 					 </div>
           <!--商家信息--> 
           <div class="info">
           	<h1 class="title border-bottom">商家信息</h1>
           	<ul>
           		<li class="info-item border-bottom" v-for="info in seller.infos">{{info}}</li>
           	</ul>
           </div>
          
      </div>
  </div>
</template>

<script>
import star from '@/components/star/star';
import BScroll from 'better-scroll';
import split from '@/components/split/split'
export default {
  name: 'seller',
  data () {
    return {
      favorite: false
    }
  },
  props:{
  	seller:{
  		type:Object
  	}
  },
  created(){
  	  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  },
  mounted(){
  	this._initScroll(),
  	this._initPics()
  },
  methods:{
  	//点击变化小红星
  	toggleFavorite(event){
  		if(!event._constructed){
  			 return;
  		}
  		this.favorite=!this.favorite;
  		
  	},
  	_initScroll(){//ratings 组件调用BScroll滚动条
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      },
      _initPics() {//定义滚动体的宽度
        if (this.seller.pics) {
          let picWidth = 120;
          let margin = 6;
          let width = (picWidth + margin) * this.seller.pics.length - margin;
          this.$refs.piclist.style.width = width + 'px';
          this.$nextTick(() => {
            if (!this.picScroll) {
              this.picScroll = new BScroll(this.$refs.picwrapper, {
                scrollX: true,
                eventPassthrough: 'vertical'
              });
            }else {
              this.picScroll.refresh();
            }
          });
        }
      }
  	 
  },
  computed:{
  	favoriteText(){
  		return this.favorite?'已收藏':'未收藏'
  	}
  },
  watch:{
  	'seller'(){
  	this._initScroll(),
  	this._initPics()
  	}
  },
  components:{
  	star,
  	split
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
			.seller{
				 position: absolute;
				 top: 174px;
				 bottom: 0;
				 left: 0;
				 width: 100%;
				 overflow: hidden;
				 .overview{
				 	  position: relative;
				 	  padding: 18px;
				 	  .title{
				 	  	margin-bottom: 8px;
				 	  	line-height: 14px;
				 	  	color: rgb(7,17,27);
				 	  	font-size: 14px;
				 	  }
				 	  .desc{
				 	  	padding-bottom: 18px;
				 	  	font-size: 0;
				 	  	.star{
				 	  		display: inline-block;
				 	  		vertical-align: top;
				 	  		margin-right: 8px;
				 	  	}
				 	  	.text{
				 	  		display: inline-block;
				 	  		vertical-align: top;
				 	  		margin-right: 12px;
				 	  		line-height: 18px;
				 	  		font-size: 10px;
				 	  		color: rgb(77,85,93);
				 	  	}
				 	  }
				 	  .remark{
				 	  	display: flex;
				 	  	padding-top: 18px;
				 	  	.block{
				 	  		flex: 1;
				 	  		text-align: center;
				 	  		&:last-child{
				 	  			border: none;
				 	  		}
				 	  		h2{
				 	  			margin-bottom: 4px;
				 	  			line-height: 10px;
				 	  			font-size: 10px;color: rgb(147,153,159);
				 	  		}
				 	  		.content{
				 	  			line-height: 24px;
				 	  			font-size: 10px;
				 	  			color:  rgb(7,17,27);
				 	  			.stress{
				 	  				font-size: 24px;
				 	  			}
				 	  		}
				 	  	}
				 	  }
				 	  .favorite{
				 	  	position: absolute;
				 	  	right: 11px;
				 	  	top: 18px;
				 	  	width: 50px;
				 	  	text-align: center;
				 	  	.icon-favorite{
				 	  		 display: block;
				 	  		 margin-bottom: 4px;
				 	  		 font-size: 24px;
				 	  		 line-height: 24px;
                 color:#d4d6d9;
                 &.active{
                 	color:rgb(240,20,20);
                 }
				 	  	}
				 	  	.text{
                	line-height: 10px;
                	font-size: 10px;
                	color: rgb(75,85,93)
                }
				 	  }
				 }
				 .bulletin{
				 		padding: 18px 18px 0 18px;
				 		.title{
				 	  	margin-bottom: 8px;
				 	  	line-height: 14px;
				 	  	color: rgb(7,17,27);
				 	  	font-size: 14px;
				 	  }
				 	  .content-wrapper{
				 	  	 .content{
				 	  	 	  line-height: 24px;
				 	  	 	  font-size: 12px;
				 	  	 	  color: rgb(240,20,20);
				 	  	 }
				 	  }
				 	  .supports{
				 	  	.support-item{
				 	  		 padding: 16px 12px;
				 	  		 font-size: 0;
				 	  	   &:last-child::before{
				 	  			border: none;
				 	  		}
					 	  	.icon{
								display: inline-block;
								width: 16px;
								height: 16px;
								margin-right: 4px;
								vertical-align: top;
								&.decrease{
									 background: url(img/decrease_1@3x.png);
									 background-repeat: no-repeat;
								   background-size:cover;
								}
								&.discount{
									background: url(img/discount_1@3x.png);
									background-repeat: no-repeat;
								  background-size:cover;
								}
								&.guarantee{
									background: url(img/guarantee_1@3x.png);
									background-repeat: no-repeat;
								  background-size:cover;
								}
								&.invoice{
									background: url(img/invoice_1@3x.png);
									background-repeat: no-repeat;
								  background-size:cover;
								}
								&.special{
									background: url(img/special_1@3x.png);
									background-repeat: no-repeat;
							   	background-size:cover;
								}
							}
							.text{
								 line-height: 16px;
								 font-size: 12px;
								 color:rgb(7,17,27) ;
							}
				 	  	}
				 	  }
				 	  
				 }
				 .pics{
				 	padding: 18px;
				 	.title{
				 	  	margin-bottom: 12px;
				 	  	line-height: 14px;
				 	  	color: rgb(7,17,27);
				 	  	font-size: 14px;
				 	  }
				 	 .pic-wrapper{
				 	 		width: 100%;
				 	 		overflow: hidden;
				 	 		white-space: nowrap;
				 	 		.pic-list{
				 	 			font-size: 0;
				 	 			.pic-item{
				 	 				display: inline-block;
				 	 				margin-right: 6px;
				 	 				width: 120px;
				 	 				height: 90px;
				 	 				&:last-child{
				 	 					margin-right: 0;
				 	 				}
				 	 			}
				 	 		}
				 	 }
				 	  
				 }
				 .info{
				 	 padding:18px 18px 0 18px;
				 	 color: rgb(7,17,27);
				 	 .title{
				 	 	  padding-bottom: 12px;
				 	  	line-height: 14px;
				 	  	font-size: 14px;
				 	 }
				 	 .info-item{
				 	 	 padding: 16px 12px;
				 	 	 line-height: 16px;
				 	 	 line-height: 16px;
				 	 	 font-size: 12px;
				 	 	 &:last-child::before{
				 	  			border: none;
				 	  		}
				 	 	 
				 	 }
				 }
			}
</style>

